<template>
  <!-- 模板代码保持不变 -->
  <div class="cesium-container">
    <div id="cesiumContainer"></div>

    <div class="cesium-utils-container">
      <div class="cesium-utils-btn">
        <div class="cesium-utils-btn-item">
          <div class="cesium-utils-btn-item-text">cesium工具栏</div>

          <div class="cesium-utils-btn-item-content">
            <div class="cesium-utils-btn-item-content-item" @click="addPoint">
              画点
            </div>
            <div class="cesium-utils-btn-item-content-item" @click="addLine">
              画线
            </div>
            <div class="cesium-utils-btn-item-content-item">画面</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import CesiumMap from "../utils/CesiumMap";
import { onMounted, ref } from "vue";

// 地图的位置
let position = null;

// 初始化的地图实例
let cesiumMap = null;

// 点的实体
let markerPointEntities = [];
// 线的实体
let markerLineEntities = [];

onMounted(() => {
  initMap();
});

//   初始化地图
const initMap = () => {
  cesiumMap = new CesiumMap("cesiumContainer");
  // 让cesium地图飞行到指定位置
  position = CesiumMap.Cartesian3.fromDegrees(116.3913, 39.9075, 1000);
  cesiumMap.flyTo(position, { duration: 3 });
};

// 点击画点
const addPoint = () => {
  cesiumMap.addScreenSpaceEventHandler(
    CesiumMap.ScreenSpaceEventType.LEFT_CLICK,
    handleMarkPointClick
  );
};

// 点击地图添加点
function handleMarkPointClick(movement) {
  // 这个movement就能拿到笛卡尔坐标
  const cartesian = cesiumMap.viewer.scene.pickPosition(movement.position);

  //   console.log('cartesian',cartesian)
  if (!cartesian) return;
  //  笛卡尔坐标转经纬度
  const cartographic = CesiumMap.Cartographic.fromCartesian(cartesian);
  const lng = CesiumMap.Math.toDegrees(cartographic.longitude);
  const lat = CesiumMap.Math.toDegrees(cartographic.latitude);

  //   console.log('lng',lng)
  //   console.log('lat',lat)
  const entity = cesiumMap.addEntity({
    position: CesiumMap.Cartesian3.fromDegrees(lng, lat),

    // 点的样式
    point: {
      pixelSize: 8,
      color: CesiumMap.Color.BLUE,
      outlineColor: CesiumMap.Color.WHITE,
      outlineWidth: 1,
    },
  });
  markerPointEntities.push(entity);
  console.log("markerPointEntities", markerPointEntities);
}

// 点击画线
const addLine = () => {
  cesiumMap.addScreenSpaceEventHandler(
    CesiumMap.ScreenSpaceEventType.LEFT_CLICK,
    handleMarkLineClick
  );
};


// 点击地图添加线
function handleMarkLineClick(movement) {
  const cartesian = cesiumMap.viewer.scene.pickPosition(movement.position);
  if (!cartesian) return;
  const cartographic = CesiumMap.Cartographic.fromCartesian(cartesian);
  const lng = CesiumMap.Math.toDegrees(cartographic.longitude);
  const lat = CesiumMap.Math.toDegrees(cartographic.latitude);
  console.log("lng", lng);
  console.log("lat", lat);
  const entity = cesiumMap.addEntity({
    position: CesiumMap.Cartesian3.fromDegrees(lng, lat),
    polyline: {
      positions: [CesiumMap.Cartesian3.fromDegrees(lng, lat)],
      color: CesiumMap.Color.BLUE,
    },
  });
  console.log("entity", entity);
  markerLineEntities.push(entity);
  console.log("markerLineEntities", markerLineEntities);
}

</script>

<style scoped>
.cesium-container {
  position: relative;
  width: 100vw;
  height: 100vh;
}

#cesiumContainer {
  width: 100vw;
  height: 100vh;
}

.cesium-utils-container {
  width: 100%;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  color: #000;
}

.cesium-utils-btn-item {
  position: relative;
  display: flex;
  align-items: center;
  width: 100px;
  height: 100%;
  line-height: 50px;
  text-align: center;
  margin-left: 10px;
}

.cesium-utils-btn-item-text {
  cursor: pointer;
}

.cesium-utils-btn-item-content {
  display: none;
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 1000;
}

.cesium-utils-btn-item:hover .cesium-utils-btn-item-content {
  display: block;
  color: skyblue;
}

.cesium-utils-btn-item-content-item {
  color: #000;
}

.cesium-utils-btn-item-content-item:hover {
  color: #fff;
  background-color: skyblue;
  cursor: pointer;
}

</style>
